<template>
    <div id="print" class="print">
        <h2 class="text-center">苏华靖建筑科技有限公司工资表</h2>
        <div class="text-right"><el-text>{{ form.issue_date }}</el-text></div>
        <el-table class="custom-header-table" show-summary size="small" :data="tableData" border v-loading="form.loading" style="width: 100%;height:auto !important;font-size: 16px;">																		
            <el-table-column label="姓名" width="70" align="center" >
                <template #default="scope">
                    <el-text>{{ scope.row.user.name }}</el-text>
                </template>
            </el-table-column>
            <el-table-column prop="basic_salary" label="基本薪资" width="80" align="center" />
            <el-table-column prop="subsidies" label="岗位补贴" width="80" align="center" />
            <el-table-column prop="rewards" label="研发奖励" width="80" align="center" />
            <el-table-column prop="other_subsidies" label="其他补贴" width="80" align="center" />
            <el-table-column prop="base" label="社保基数" width="80" align="center" />
            <el-table-column label="个人代扣" align="center" >
                <el-table-column prop="pension_insurance" label="养老保险8%" width="60" align="center" />
                <el-table-column prop="medical_insurance" label="医疗保险2%" width="60" align="center" />
                <el-table-column prop="unemployment_insurance" label="失业保险0.5%" width="60" align="center" />
                <el-table-column prop="housing" label="住房8%" width="60" align="center" />
                <el-table-column prop="social_security" label="个税8%" width="60" align="center" />
                <el-table-column prop="tax" label="个税合计" width="70" align="center" />
            </el-table-column>
            <el-table-column prop="net_salary" label="总计(实际支付)" width="70" align="center" />
            <el-table-column prop="pay_type" label="支付方式" width="70" align="center" />
            <el-table-column prop="remarks" label="备注" align="center" />
        </el-table>
    </div>
    <div class="text-center mt30"><el-button @click="printElement('print')"> 打印 </el-button></div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import http from '../util/request';
import { PrinterService } from '../util/printer'
const printer = new PrinterService()
const form = ref<any>({search:'',issue_date:'',page:0,current:0,total:10,limit:20,loading:false,parentBorder:false})
interface User {
    id: number
    basic_salary: number
    base:number
    subsidies: number
    rewards: number
    other_subsidies: number
    pension_insurance: number
    medical_insurance: number
    unemployment_insurance: number
    housing: number
    social_security: number
    tax: number
    net_salary: number
    remarks:string
    user:any
}

const tableData = ref<User[]>([])

const onGetData = () => {
    
    form.value.loading = true
    http.post('/user/wage',form.value).then((response:any)=>{
        form.value.loading = false
        response.data.data.forEach((e:User) => {
            onChange(e)
        });
        tableData.value = response.data.data
        form.value.total = response.data.total
    })
}

const onChange = (e:any) => {
    e.basic_salary = e.user.basic_salary 
    e.pension_insurance = e.base * 0.08
    e.medical_insurance = e.base * 0.02
    e.unemployment_insurance = e.base * 0.005
    e.housing = e.base * 0.08
    e.social_security = e.base * 0.08
    e.net_salary = parseFloat(e.basic_salary) + parseFloat(e.rewards) + parseFloat(e.other_subsidies) + parseFloat(e.subsidies) - parseFloat(e.pension_insurance) - parseFloat(e.medical_insurance) - parseFloat(e.unemployment_insurance) - parseFloat(e.housing)  - parseFloat(e.social_security) 
    e.tax = e.pension_insurance + e.medical_insurance + e.unemployment_insurance + e.housing + e.social_security 
}

const printElement = (elementId:string) => {
    printer.printElement(elementId, { title: '　' })
}

const props = defineProps<{
    data:any
}>()

watch(props,()=>{
    form.value.issue_date = props.data
    onGetData()
},{ immediate: true })

</script>

<style scoped>
.print{size: A4 landscape;margin: 1.5cm;;width: 297mm;height: 180mm;}
.el-table{border: 1px solid #bbbbbb;margin-top: 5px;}
:deep(.custom-header-table .el-table__header th) {
  font-weight: 300 !important; /* 加粗 */
  color: #000000;

}

:deep(.custom-header-table .el-table__cell .cell) {
    padding: 0px 2px !important; /* 减小内边距 */
    color: #000000;
}

:deep(.custom-header-table) {
    font-size: .7rem !important;
    color: #000000;
}

.el-text{font-size: .8rem !important;color: #000000;}

.el-table .el-table__header-wrapper th,
.el-table .el-table__body-wrapper td {
  border-color: #bbbbbb !important;
}
</style>